<template>
    <div class="chat-container">
    	<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="https://portrait.gitee.com/uploads/avatars/user/1636/4909645_baikaishuizhudongxi_1591855671.png!avatar30" width="100" height="90">
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">叶文洁</h4>
									<p class="oa-contact-position mui-h6">董事长</p>
								</div>
								<p class="oa-contact-email mui-h6">
									yewenjie@sina.com
								</p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="https://portrait.gitee.com/uploads/avatars/user/1636/4909645_baikaishuizhudongxi_1591855671.png!avatar30" width="100" height="90">
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">艾AA</h4>
									<p class="oa-contact-position mui-h6">总经理</p>
								</div>
								<p class="oa-contact-email mui-h6">
									aaa@163.com
								</p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="https://portrait.gitee.com/uploads/avatars/user/1636/4909645_baikaishuizhudongxi_1591855671.png!avatar30"" width="100" height="90">
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">罗辑</h4>
									<p class="oa-contact-position mui-h6">员工</p>
								</div>
								<p class="oa-contact-email mui-h6">
									luoji@126.com
								</p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="https://portrait.gitee.com/uploads/avatars/user/1636/4909645_baikaishuizhudongxi_1591855671.png!avatar30" width="100" height="90">
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">云天明</h4>
									<p class="oa-contact-position mui-h6">员工</p>
								</div>
								<p class="oa-contact-email mui-h6" >
									ytm@163.com
								</p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="https://portrait.gitee.com/uploads/avatars/user/1636/4909645_baikaishuizhudongxi_1591855671.png!avatar30" width="60" height="60">
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">史强</h4>
									<span class="oa-contact-position mui-h6">员工</span>
								</div>
								<p class="oa-contact-email mui-h6">
									shiqiang@gmail.com
								</p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="https://portrait.gitee.com/uploads/avatars/user/1636/4909645_baikaishuizhudongxi_1591855671.png!avatar30" width="100" height="90">
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">史强</h4>
									<p class="oa-contact-position mui-h6">员工</p>
								</div>
								<p class="oa-contact-email mui-h6">
									shiqiang@gmail.com
								</p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="https://portrait.gitee.com/uploads/avatars/user/1636/4909645_baikaishuizhudongxi_1591855671.png!avatar30" width="60" height="60">
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">史强</h4>
									<p class="oa-contact-position mui-h6">员工</p>
								</div>
								<p class="oa-contact-email mui-h6">
									shiqiang@gmail.com
								</p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="https://portrait.gitee.com/uploads/avatars/user/1636/4909645_baikaishuizhudongxi_1591855671.png!avatar30" width="60" height="60">
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">史强</h4>
									<p class="oa-contact-position mui-h6">员工</p>
								</div>
								<p class="oa-contact-email mui-h6">
									shiqiang@gmail.com
								</p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="https://portrait.gitee.com/uploads/avatars/user/1636/4909645_baikaishuizhudongxi_1591855671.png!avatar30" width="60" height="60">
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">史强</h4>
									<p class="oa-contact-position mui-h6">员工</p>
								</div>
								<p class="oa-contact-email mui-h6">
									shiqiang@gmail.com
								</p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="https://portrait.gitee.com/uploads/avatars/user/1636/4909645_baikaishuizhudongxi_1591855671.png!avatar30" width="60" height="60">
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">史强</h4>
									<p class="oa-contact-position mui-h6">员工</p>
								</div>
								<p class="oa-contact-email mui-h6">
									shiqiang@gmail.com
								</p>
							</div>
						</div>
					</div>
				</li>
			</ul>
    </div>	
</template>


<script>
import mui from '../../lib/mui/js/mui.min.js'

export default {
	data(){
		return {};
	},
	mounted() {
        mui.init()
	},
	methods:{

	}
}
</script>

<style lang="scss" scoped>
.mui-table-view-cell.mui-active{
    background-color: #0062CC;
}

p{line-height:30px;}	

</style>